<template>
	<view class="content">
		<view class="order-info">
			<view class="info-header">
				订单信息
			</view>
			<view class="info-box">
				<view class="left">
					<view class="info-title">
						订单编号：
					</view>

				</view>
				<view class="right">
					<view class="info-message out-trade-no">
						{{orderInfo.outTradeNo}}
					</view>
					<u-button size="mini" @click="copy(orderInfo.outTradeNo)">复制</u-button>
				</view>
			</view>
			<view class="info-box">
				<view class="left">
					<view class="info-title">
						订单状态：
					</view>
					<view class="info-message">
						{{orderInfo.pay_status == 0 ?'待付款':'已完成'}}
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="left">
					<view class="info-title">
						赠送积分：
					</view>
					<view class="info-message">
						{{orderInfo.course_id[0].integral}}积分
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="left">
					<view class="info-title">
						订单金额：
					</view>
					<view class="info-message">
						￥ {{orderInfo.total_price}}
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="left">
					<view class="info-title">
						有效期限：
					</view>
					<view class="info-message">
						{{orderInfo.course_id[0].validity}}
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="left">
					<view class="info-title">
						下单时间：
					</view>
					<view class="info-message">
						{{orderInfo.create_time | timefilter}}
					</view>
				</view>
			</view>
		</view>

		<view class="order-info">
			<view class="info-header">
				课程信息
			</view>
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="opendb-mall-goods"
				:where="cwhere" field="name,sale_price,total_sell_count,main_pic,teacher_id,is_hot" manual getone>
				<view class="card-right-img">
					<view class="card-item">
						<view class="card-left">
							<image :src="data.main_pic" mode=""></image>
						</view>
						<view class="card-right">
							<view class="top">
								<text>{{data.name}}</text>
							</view>
							<view class="bottom">
								<view class="left">

								</view>
								<view class="right">
									<text>￥{{data.sale_price}}</text>
								</view>

							</view>
						</view>

					</view>
				</view>
			</unicloud-db>
		</view>
		<view class="order-info">
			<view class="info-header">
				讲师信息
			</view>
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}"
				collection="opendb-mall-goods,teacher-info" field="teacher_id{teacher_avatar,teacher_name}"
				:where="twhere" manual getone>
				<view class="teacher-content">
					<view class="teacher">
						<view class="teacher-bottom">
							<view class="left">
								<view class="img-box">
									<image :src="data.teacher_id[0].teacher_avatar" mode=""></image>
								</view>
								<view class="name">
									<text>{{data.teacher_id[0].teacher_name}}</text>
								</view>
							</view>
							<view class="right">
								<text>讲师主页</text>
								<u-icon name="arrow-right" color="#B6B6B6" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</unicloud-db>
		</view>
		<view class="tabbar-content" v-if="orderInfo.pay_status == 0">
			<view class="empty-box">

			</view>
			<view class="tabbar">
				<view class="left">
					<view class="left-item" @click="tohome">
						<view class="icon">
							<u-icon name="home" color="#34373E" size="28"></u-icon>
						</view>
						<text>首页</text>
					</view>
				</view>
				<view class="tabbar-button-box">
					<u-button size="medium" type="success" shape="circle" @click="purchase()">支付</u-button>
					<u-button class="second-button" size="medium" type="default" shape="circle" @click="cancel()">取消</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseId: '',
				orderId: '',
				outTradeNoStr: '',
				orderInfo: {},
				cwhere: '', //课程信息判断条件
				twhere: '', //讲师信息判断条件
			}
		},
		filters: {
			timefilter(parseTime) {
				// const parseTime = (Date.parse(time)); //转化成时间戳
				const timeStr = new Date(parseTime);
				const year = timeStr.getFullYear()
				const month = (timeStr.getMonth() + 1).toString().padStart(2, 0)
				const day = timeStr.getDate().toString().padStart(2, 0)
				const hours = timeStr.getHours().toString().padStart(2, 0);
				const minute = (timeStr.getMinutes()).toString().padStart(2, 0);
				// const second = (timeStr.getSeconds()).toString().padStart(2, 0);
				return year + '-' + month + '-' + day + ' ' + hours + ':' + minute
			}
		},
		onReady() {
			if (this.courseId) {
				this.$refs.udb.loadData()
			}
		},
		onLoad(e) {
			console.log('ee', e);
			this.courseId = e.courseId;
			this.orderId = e.orderId;
			this.cwhere = "_id=='" + e.courseId + "'";
			this.twhere = "teacher_id._id=='" + e.tid + "'";
			this.getOrder();
		},
		methods: {
			purchase() {
				var that = this;
				const courseObj = that.orderInfo.course_id[0];
				const body = courseObj.body;
				const outTradeNo = that.orderInfo.outTradeNo;
				const totalFee = that.orderInfo.total_price * 100;
				console.log(body, outTradeNo, totalFee)
				const openid = uni.getStorageSync("openid");
				uniCloud.callFunction({
					name: 'getOrderInfo',
					data: {
						openid: openid,
						body: body,
						outTradeNo: outTradeNo,
						totalFee: totalFee,
					},
					success(res) {
						var orderInfo = res.result.orderInfo
						if (orderInfo) {
							return new Promise((resolve, reject) => {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: orderInfo.timeStamp,
									nonceStr: orderInfo.nonceStr,
									package: orderInfo.package,
									signType: orderInfo.signType,
									paySign: orderInfo.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
										const user_id = uni.getStorageSync("user_id");
										const db = uniCloud.database()
										db.collection('order')
											.where("user_id =='" + user_id +
												"' && course_id=='" + courseObj._id +
												"' && pay_status == 0")
											.update({
												pay_status: 1
											})
											.then(res => {
												console.log('upo', res);
												if (res.result.updated == 1) {
													uni.showToast({
														title: '支付成功',
														icon: "none"
													})
													uni.navigateBack({
														delta:1
													})
												}
											}).catch(err => {
												console.error(err)
												uni.showToast({
													title: '支付失败',
													icon: "none"
												})
											})
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
										
										uni.showToast({
											title: '支付失败',
											icon: "none"
										})
									}
								});
							})
						}
					},
					fail(res) {
						console.log(res)
					}
				})
			},
			cancel(){
				var that = this;
				const db = uniCloud.database();
				db.collection("order").where("_id=='"+ that.orderId + "'").remove().then(res=>{
					console.log('cr',res)
					if(res.result.deleted == 1){
						uni.showToast({
							title:'订单已取消',
							icon:'none'
						})
						uni.navigateBack({
							delta:1
						})
						return
					}
				})
			},
			tohome() {
				uni.reLaunch({
					url:'../index/index'
				})
			},
			copy(e) { //复制
				let that = this
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			getOrder() {
				var that = this;
				const user_id = uni.getStorageSync('user_id');
				const db = uniCloud.database()
				db.collection('order,userinfo,opendb-mall-goods')
					.where("user_id._id=='" + user_id + "' && course_id._id=='" + that.courseId + "'")
					.field('user_id{username},course_id{_id,validity,integral,body},pay_status,create_time,outTradeNo,total_price')
					.get()
					.then(res => {
						console.log('go', res);
						if (res.result.data.length != 0) {
							that.orderInfo = res.result.data[0];
							that.outTradeNoStr = res.result.data[0].outTradeNo;
							return
						}
					}).catch(err => {
						console.error(err)
					})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.content {}

	.out-trade-no {
		font-size: 24rpx !important;
		margin-right: 10rpx;
	}

	.order-info {
		background-color: #fff;
		width: 670rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		margin-top: 30rpx;

		.info-header {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			border-bottom: 1px solid #f1f1f1;
			padding: 20rpx 0;
		}

		.info-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				display: flex;
				flex-wrap: wrap;

				.info-title {
					color: #A7A7A7;
				}

				.info-message {
					color: #4B4B4B;
					margin-left: 10rpx;
				}
			}

			.right {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;

				/deep/ .u-size-mini {
					padding: 0 10rpx !important;
				}
			}
		}
	}

	//图片在左侧的 card-right-img
	.card-right-img-wrap {
		background-color: #F4F5F9;
		// padding: 15rpx;
	}

	.card-right-img {
		background-color: #fff;
		// padding: 0 15rpx;

		.card-item {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			padding: 20rpx 0;
			border-top: 1px solid #FAFAFA;

			.card-left {
				width: 260rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.card-right {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 20rpx 0 10rpx 0;
				width: 370rpx;
				margin-left: 30rpx;

				.top {
					font-size: 28rpx;
					color: #434343;
					// font-weight: bold;
				}

				.bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.left {
						color: #B5B5B5;
						font-size: 24rpx;
					}

					.right {
						color: #F56C6C;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.teacher-bottom {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;

		.left {
			display: flex;
			flex-wrap: wrap;

			.img-box {
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				font-size: 32rpx;
				margin: 26rpx 0 0 20rpx;
			}
		}

		.right {
			color: #B6B6B6;
			font-size: 26rpx;
			margin-top: 26rpx;
		}
	}
	//底部导航
	.tabbar-content {
		background-color: #fafafa;
		.empty-box {
			height: 120rpx;
		}
	
		.tabbar {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 670rpx;
			z-index: 99;
			background-color: #fff;
			border-top: 1px solid #ccc;
			padding: 0 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;
				flex-wrap: wrap;
	
				.left-item {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					font-size: 26rpx;
					width: 100rpx;
	
					.icon {
						margin: 15rpx 0 5rpx 10rpx;
					}
				}
			}
	
			.tabbar-button-box{
				.second-button{
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
